<template>
  <view class="registration pageb">
    <up-form labelPosition="left" :model="formData" ref="formRef" errorType="toast" labelWidth="100">
      <u-cell-group title="商户信息">
        <u-form-item label="商户名称" prop="merchantName" borderBottom>
          <up-input v-model="formData.merchantName" border="none"></up-input>
        </u-form-item>
        <u-form-item label="手机号码" prop="mobile" borderBottom>
          <up-input v-model="formData.mobile" border="none"></up-input>
        </u-form-item>
        <u-form-item label="美团店铺ID" prop="mtStoreId" borderBottom>
          <up-input v-model="formData.mtStoreId" border="none"></up-input>
        </u-form-item>
        <!-- <u-form-item label="门店类型" prop="poiType" borderBottom>
          <u-radio-group v-model="formData.poiType" placement="row">
            <u-radio label="鲜花类" :name="1"> </u-radio>
            <u-radio label="蛋糕类" :name="2"> </u-radio>
          </u-radio-group>
        </u-form-item> -->
        <u-form-item label="门店接单电话" prop="poiMobile" borderBottom>
          <up-input v-model="formData.poiMobile" border="none"></up-input>
        </u-form-item>
        <u-form-item label="门店定位" borderBottom>
          <view @click="chooseAddress" style="height: 20px;width: 200px;">
            <text v-if="formData.poiLnt">{{ `${formData.poiLnt},${formData.poiLat}` }}</text>
          </view>
        </u-form-item>
        <u-form-item label="门店地址" prop="poiAddress" borderBottom>
          <up-input v-model="formData.poiAddress" border="none"></up-input>
        </u-form-item>
      </u-cell-group>

      <u-cell-group title="营业执照照片（请勿截屏截图）">
        <u-form-item prop="businessLicense" borderBottom>
          <Upload v-model="formData.businessLicense" />
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="食品经营许可证照片（请勿截屏截图）">
        <u-form-item prop="foodBusinessLicense" borderBottom>
          <Upload v-model="formData.foodBusinessLicense" />
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="法人身份证照片（正反两张）">
        <u-form-item prop="legalManId" borderBottom>
          <Upload v-model="formData.legalManId" />
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="法人手持身份证照片（正反两张）">
        <u-form-item prop="legalManTakeId" borderBottom>
          <Upload v-model="formData.legalManTakeId" />
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="实体门头照（请勿截屏截图）">
        <u-form-item prop="storePhoto" borderBottom>
          <Upload v-model="formData.storePhoto" />
        </u-form-item>
      </u-cell-group>
      <u-cell-group title="店内环境照（请勿截屏截图）">
        <u-form-item prop="envirPhoto" borderBottom>
          <Upload v-model="formData.envirPhoto" />
        </u-form-item>
      </u-cell-group>

      <u-cell-group title="银行信息">
        <u-form-item label="开户人姓名" prop="accountHolder" borderBottom>
          <up-input v-model="formData.accountHolder" border="none"></up-input>
        </u-form-item>
        <u-form-item label="银行卡号" prop="accountCard" borderBottom>
          <up-input v-model="formData.accountCard" border="none"></up-input>
        </u-form-item>
        <u-form-item label="银行卡开户行" prop="accountBank" borderBottom>
          <up-input v-model="formData.accountBank" border="none"></up-input>
        </u-form-item>
      </u-cell-group>

    </up-form>

    <div class="continer mt20">
      <u-button @click="submit" type="primary">提交</u-button>
    </div>

  </view>
</template>

<script lang="ts" setup>
import { merchantInster } from '@/apis';
import Upload from "@/components/upload.vue";
import { useRequest } from '@/hooks/useRequest';
import { onMounted, reactive, ref } from 'vue';

const formRef = ref()
const formData = reactive({
  accountBank: "",
  accountCard: "",
  accountHolder: "",
  businessLicense: "",
  envirPhoto: "",
  foodBusinessLicense: "",
  legalManId: "",
  legalManTakeId: "",
  merchantName: "",
  mobile: "",
  mtStoreId: "",
  password: "",
  poiAddress: "",
  poiLat: 0,
  poiLnt: 0,
  poiMobile: "",
  poiType: 0,
  remark: "",
  storePhoto: "",
})

const chooseAddress = () => {
  uni.chooseLocation({
    success: function (res) {
      formData.poiAddress = res.name
      formData.poiLnt = Number(res.longitude.toFixed(5))
      formData.poiLat = Number(res.latitude.toFixed(5))
      console.log('位置名称：' + res.name);
      console.log('详细地址：' + res.address);
      console.log('纬度：' + res.latitude);
      console.log('经度：' + res.longitude);
    }
  });
}

const submit = async () => {
  try {
    await formRef.value.validate()
    useRequest([merchantInster, formData], {
      showSuccess: true,
      isBack: true
    })
  } catch (error) {
    console.error(error)
  }
}

onMounted(() => {
  // 表单验证
  const rules = {
    merchantName: [
      {
        required: true,
        message: '请输入商户名称',
        trigger: ['blur', 'change']
      }
    ], mobile: [
      {
        required: true,
        message: '请输入手机号码',
        trigger: ['blur', 'change']
      }
    ], mtStoreId: [
      {
        required: true,
        message: '请输入美团店铺ID',
        trigger: ['blur', 'change']
      }
    ], poiMobile: [
      {
        required: true,
        message: '请输入门店接单电话',
        trigger: ['blur', 'change']
      }
    ], poiAddress: [
      {
        required: true,
        message: '请输入门店地址',
        trigger: ['blur', 'change']
      }
    ], accountHolder: [
      {
        required: true,
        message: '请输入开户人姓名',
        trigger: ['blur', 'change']
      }
    ], accountCard: [
      {
        required: true,
        message: '请输入银行卡号',
        trigger: ['blur', 'change']
      }
    ], accountBank: [
      {
        required: true,
        message: '请输入银行开户行',
        trigger: ['blur', 'change']
      }
    ], businessLicense: [
      {
        required: true,
        message: '请上传营业执照照片',
        trigger: ['blur', 'change']
      }
    ], legalManId: [
      {
        required: true,
        message: '请上传法人身份证照片',
        trigger: ['blur', 'change']
      }
    ], legalManTakeId: [
      {
        required: true,
        message: '请上传法人手持身份证照片',
        trigger: ['blur', 'change']
      }
    ], storePhoto: [
      {
        required: true,
        message: '请上传实体门头照',
        trigger: ['blur', 'change']
      }
    ]
  }

  formRef.value.setRules(rules)
})
</script>

<style lang="scss" scoped>
.registration ::v-deep .u-form-item .u-form-item__body {
  background-color: #fff;
  padding-left: 15px;
}

.registration ::v-deep .u-radio {
  margin-right: $uni-spacing-row-base;
}
</style>